<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>EaselJS Example: Threshold Filter</title>

    <link href="../../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
    <link href="../../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
    <script src="../../_assets/js/examples.js"></script>

    <script src="../../lib/easeljs-NEXT.js"></script>
    <!-- We also provide hosted minified versions of all CreateJS libraries.
      http://code.createjs.com -->

    <script src="ThresholdFilter.js"></script>

    <script id="editable">
        var img;
        var stage;
        var angle = 0;
        var range = 30;
        var speed = 0.2;

        function init() {
            img = new Image();
            img.onload = handleImageLoad;
            img.src = "../../_assets/art/flowers.jpg";
        }

        function handleImageLoad() {
            stage = new createjs.Stage("testCanvas");
            bmp = new createjs.Bitmap(img);
            bmp.cache(0, 0, img.width, img.height);
            stage.addChild(bmp);

            createjs.Ticker.setFPS(15);
            createjs.Ticker.on("tick", tick);
        }

        function tick(event) {
            angle += speed;

            var value = Math.sin(angle) * 0xff / 2 + 0xff / 2; // Between 0 and 0xFF

            // maintain any channels that "fail" by passing "true" to the failColor
            bmp.filters = [new createjs.ThresholdFilter(value, value, value, 0xFF0000, true)];
            bmp.updateCache();

            stage.update(event);
        }
    </script>
</head>

<body onload="init();">

<header class="EaselJS">
    <h1>Threshold Filter</h1>

    <p>
        A filter that thresholds an image based on the color channel passed in. This example uses the same value for
        all 3 channels, and leaves pixels that fail the threshold check.
    </p>
</header>

<div>
    <canvas id="testCanvas" width="960" height="400"></canvas>
</div>
</body>
</html>
